<template>
	<view class="goods_list">
		<goods-list :goods="goods"></goods-list>
		<view class="isOver" v-if="flag">-----到底啦-----</view>
	</view>
</template>

<script>
	// 导入商品列表组件
	import goodsList from '../../components/goods_list/goods_list.vue'
	export default {
		data() {
			return {
				// 页码
				pageindex:2,
				// 商品列表数据
				goods:[],
				// 控制显示与隐藏到底标签元素
				flag:false
			}
		},
		components:{
			goodsList
		},
		onLoad() {
			this.getGoodsList();
		},
		methods: {
			// 获取商品的列表数据
			getGoodsList(){
				this.$myRequest({
					url:'/goods/search?pagenum=' + this.pageindex
				}).then((res) => {
					// console.log(res);
					// 保存商品列表数据
					// 使用...解析原来的数据和当前新请求的数据，然后再赋值给goods
					this.goods = [...this.goods,...res.data.message.goods]
				})
			}
		},
		// 页码触底事件
		onReachBottom() {
			if(this.goods.length < this.pageindex * 20) return this.flag = true
			// 页面触底让页码加1
			this.pageindex++;
			// 然后再重新调用请求商品列表函数
			this.getGoodsList();
		},
		// 页面下拉刷新事件
		onPullDownRefresh() {
			// console.log('111');
			// 页面刷新 初始化
			this.pageindex = 1
			this.goods = []
			this.flag = false
			setTimeout(() => {
				// 重新请求数据
				this.getGoodsList()
				// 请求数据成功之后 调用停止刷新事件
				uni.stopPullDownRefresh()
			},1000)
		}
	}
</script>

<style lang="scss">
	.goods_list{
		background: #eee;
	}
	.isOver{
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 28rpx;
	}
</style>
